<template>
	<view class="page">
		<view :key="index" v-for="(item, index) in list" class="getting">
			<view class="getting-image"><image :src="item.headUrl || '/static/images/my/customer.png'" mode=""></image></view>
			<view class="getting-title">
				<view class="title">{{ item.nickname || '金猪宝宝' }}</view>
				<view class="desc">已收获{{ item.finishCount }}棵果树</view>
			</view>
			<view @click="handlePlan(item)" class="getting-button"><image src="/static/icons/wateraction.png" mode=""></image></view>
		</view>

		<tui-no-data imgUrl="/static/images/toast/img_nodata.png" v-if="!loading && !list.length">暂无团队</tui-no-data>
		<tui-modal :show="signModal" @click="handleShowVideo" @cancel="signModal = false" title="提示" content="观看完视频即可浇水"></tui-modal>
	</view>
</template>

<script>
import { myTeamListPage, watering } from '@/service/farm.js';
export default {
	data() {
		return {
			list: [],
			loading: true,
			pageNum: 1,
			signModal: false
		};
	},
	onLoad(options) {
		this.getList();
	},
	onPullDownRefresh() {
		this.pageNum = 1;
		this.getList();
		setTimeout(v => {
			uni.stopPullDownRefresh();
		}, 1000);
	},
	onReachBottom() {
		this.getList();
	},
	methods: {
		async getList() {
			try {
				this.loading = true;
				const resp = await myTeamListPage({ pageNum: this.pageNum, pageSize: 10 }, { loading: true });
				this.list = this.pageNum == 1 ? resp.data : [...this.list, ...resp.data];
				this.pageNum++;
			} finally {
				this.loading = false;
			}
		},
		handleShowVideo({ index }) {
			this.signModal = false;
			if (index == 0) {
				return;
			}

			this.$loadRewardVideoAd(this.handleWater);
		},

		async handleWater() {
			try {
				uni.showLoading();
				await watering({ userSeedId: this.userSeedId });
				setTimeout(v => {
					this.$msg('浇水成功');
				}, 1000);
			} finally {
				uni.hideLoading();
			}
		},
		async handlePlan(item) {
			if (!item.userSeedId) {
				return this.$msg('暂不能给团员浇水');
			}
			this.userSeedId = item.userSeedId;
			this.signModal = true;
		}
	}
};
</script>

<style lang="scss" scoped>
view {
	display: flex;
	box-sizing: border-box;
}
.page {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	background: $tree-bg;
}
.getting {
	width: 710upx;
	height: 150upx;
	margin: 20upx auto;
	background: #e4f6c0;
	border-radius: 20upx;
	display: flex;
	align-items: center;
	padding: 10upx 40upx;
	position: relative;

	&-image {
		background-color: #ffffff;
		border-radius: 50%;
		overflow: hidden;
		margin-right: 40upx;
		image {
			height: 110upx;
			width: 110upx;
		}
	}
	&-title {
		// margin-left: 10upx;
		display: flex;
		flex-direction: column;
	}
	.title {
		color: #4e8308;
		font-size: 34upx;
	}
	.desc {
		margin-top: 10upx;
		color: #5c9408;
		font-size: 28upx;
	}

	&-button {
		position: absolute;
		right: 40upx;
		top: 44upx;
		image {
			height: 54upx;
			width: 156upx;
		}
	}
}
</style>
